<!--
 * @Author: sheny
 * @Date: 2023-09-07 15:32:34
 * @Description: 用户内容
-->
<template>
  <basic-container>
    <avue-crud
      ref="crud"
      v-model="form"
      class="base-crud"
      :page.sync="page"
      :data="tableData"
      :table-loading="tableLoading"
      :option="tableOption"
      @on-load="getList"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
    >
      <template #choiceFlag="scope">
        <el-switch
          :value="scope.row.choiceFlag"
          inactive-value="0"
          active-value="1"
          @change="handleChoiceChange($event, scope.row)"
        />
      </template>
      <template #shieldFlag="scope">
        <el-switch
          :value="scope.row.shieldFlag"
          inactive-value="0"
          active-value="1"
          @change="handleShieldChange($event, scope.row)"
        />
      </template>
      <template v-slot:id="{ row }">
        <el-button
          type="text"
          @click="detail(row)"
        >
          {{ row.id }}
        </el-button>
      </template>
      <template v-slot:user="{ row }">
        <div class="flex align-items">
          <div class="avatar-wrapper">
            <el-avatar
              v-if="row.userAvatar"
              :size="20"
              :src="row.userAvatar"
            ></el-avatar>
          </div>
          <div class="flex-1">{{ row.userNickname }}</div>
        </div>
      </template>
      <template v-slot:commentQty="{ row }">
        <el-button
          type="text"
          @click="comment(row)"
        >
          {{ row.commentQty }}
        </el-button>
      </template>
      <template slot="menuLeft">
        <el-button
          type="primary"
          size="small"
          @click="select"
        >
          批量精选
        </el-button>
      </template>
      <template
        slot="menu"
        slot-scope="scope"
      >
        <el-button
          type="text"
          @click="like(scope.row)"
        >
          点赞
        </el-button>
        <el-button
          type="text"
          @click="accountComment(scope.row)"
        >
          评论
        </el-button>
        <el-button
          v-if="scope.row.topFlag === TOPFLAG.NOTOP"
          type="text"
          @click="top(scope.row, TOPFLAG.TOP)"
        >
          置顶
        </el-button>
        <el-button
          v-if="scope.row.topFlag === TOPFLAG.TOP"
          type="text"
          @click="top(scope.row, TOPFLAG.NOTOP)"
        >
          取消置顶
        </el-button>
      </template>
    </avue-crud>
    <comment-popup
      v-if="commentVisible"
      :id="id"
      v-model="commentVisible"
      type="dynamic"
    ></comment-popup>
    <detail-dialog
      :id="id"
      v-model="detailVisible"
      :type="type"
    ></detail-dialog>
    <like-dialog
      :id="id"
      v-model="likeVisible"
      :action="action"
      :relative-type="CONTENT_TYPE.DYNAMIC"
      @success="getList"
    ></like-dialog>
    <account-comment-dialog
      :id="id"
      v-model="accountVisible"
      :relative-type="CONTENT_TYPE.DYNAMIC"
      @success="getList"
    ></account-comment-dialog>
    <dynamic-top-time-dialog
      :id="id"
      v-model="topVisible"
      :top-flag="topFlag"
      @refresh="getList"
    ></dynamic-top-time-dialog>
  </basic-container>
</template>
<script>
import { tableOption } from '@/const/crud/community-content/user';
import crudMixins from '@/mixins/crud';
import detailDialog from './component/detailDialog.vue';
import likeDialog from './component/likeDialog.vue';
import accountCommentDialog from './component/accountCommentDialog.vue';
import commentPopup from '../content/pet-record/components/commentPopup.vue';
import dynamicTopTimeDialog from './component/dynamicTopTimeDialog.vue';
import { CONTENT_TYPE } from '@/const/type';
import {
  selectDynamicQuery,
  shieldDynamic,
  topShareChoice,
  batchShareChoice,
} from '@/api/core/dynamic';
import {
  DYNAMIC_TYPE,
  TOPFLAG,
  SELECT_STATUS,
  SHEILD_STATUS,
} from '@/const/type';
export default {
  components: {
    detailDialog,
    likeDialog,
    accountCommentDialog,
    commentPopup,
    dynamicTopTimeDialog,
  },
  mixins: [crudMixins],
  props: {
    topicName: {
      type: String,
    },
    topicType: {
      type: String,
    },
  },
  data() {
    return {
      form: {},
      selectionList: [],
      commentVisible: false,
      detailVisible: false,
      likeVisible: false,
      accountVisible: false,
      topVisible: false,
      action: '',
      DYNAMIC_TYPE: DYNAMIC_TYPE,
      TOPFLAG: TOPFLAG,
      SHEILD_STATUS: SHEILD_STATUS,
      CONTENT_TYPE: CONTENT_TYPE,
      SELECT_STATUS: SELECT_STATUS,
      id: '',
      type: '',
      tableData: [],
      tableOption: tableOption(true, this.topicType === 'topic'),
      topFlag: '',
    };
  },
  methods: {
    handleChoiceChange(e, row) {
      const tip =
        e === '1'
          ? '开启精选后，该日记将在尾巴圈显示“精选”标签，并赠送对应关联宠物罐头能量一次，确定加入精选吗？'
          : '取消精选将会去掉【精选】标识，确定取消精选吗？';
      const status =
        e === '1' ? SELECT_STATUS.SELECTED : SELECT_STATUS.NOSELECTED;
      this.$confirm(`${tip}`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const params = {
          id: row.id,
          choiceFlag: status,
        };
        batchShareChoice([params]).then(() => {
          this.getList();
          this.$message.success(e === '1' ? '已开启' : '已关闭');
        });
      });
    },
    handleShieldChange(e, row) {
      const tip = e === '1' ? '开启屏蔽' : '关闭屏蔽';
      const status = e === '1' ? SHEILD_STATUS.SHEILD : SHEILD_STATUS.NOSHEILD;
      this.$confirm(`是否${tip}状态`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const params = {
          id: row.id,
          flag: status,
        };
        shieldDynamic(params).then(() => {
          this.getList();
          this.$message.success(`${tip}`);
        });
      });
    },
    //点赞
    like(row) {
      this.id = row.id;
      this.action = 'like';
      this.likeVisible = true;
    },
    //动态详情
    detail(row) {
      this.id = row.id;
      this.detailVisible = true;
      this.type = 'user';
    },
    //置顶
    top(row, status) {
      this.topFlag = status;
      this.id = row.id;
      if (status === TOPFLAG.NOTOP) {
        const tip =
          '取消置顶后，该内容会恢复默认排序，不再靠前展示，确定取消置顶吗？';
        this.$confirm(`${tip}`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(function () {
            const params = {
              id: row.id,
              flag: status,
            };
            return topShareChoice(params);
          })
          .then(() => {
            this.getList();
          });
      } else {
        this.topVisible = true;
      }
    },
    //评论
    comment(row) {
      this.id = row.id;
      this.commentVisible = true;
    },
    //灌水账号评论
    accountComment(row) {
      this.id = row.id;
      this.accountVisible = true;
    },
    selectionChange(selection) {
      console.log('select', selection);
      this.selectionList = selection;
    },
    //批量精选
    select() {
      if (!this.selectionList.length) {
        this.$message.warning('请至少选择一条数据！');
      } else {
        this.$confirm(
          '开启精选后，该动态将在移动端显示“精选”标签，并赠送对应关联宠物罐头能量一次，确定加入精选吗？',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        ).then(() => {
          const result = [];
          this.selectionList.forEach((item) => {
            result.push({
              id: item.id,
              choiceFlag: SELECT_STATUS.SELECTED,
            });
          });
          batchShareChoice(result).then(() => {
            this.getList();
          });
        });
      }
    },
    getList(page, refresh) {
      if (refresh) {
        this.page.current = 1;
        this.page.currentPage = 1;
      }
      this.tableLoading = true;
      const timeObj = {};
      if (this.searchForm.createTime && this.searchForm.createTime.length) {
        timeObj.startDate = this.searchForm.createTime[0];
        timeObj.endDate = this.searchForm.createTime[1];
        // delete this.searchForm.createTime;
      }
      selectDynamicQuery(
        Object.assign(
          {
            current: this.page.currentPage,
            size: this.page.pageSize,
            type: this.topicType !== 'topic' ? DYNAMIC_TYPE.USER : '',
            topicNames: this.topicName,
          },
          this.searchForm,
          timeObj
        )
      )
        .then((response) => {
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .avue-crud__tip {
    width: 100%;
  }
}
.avatar-wrapper {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 5px;
  ::v-deep img {
    width: 100%;
    height: 100%;
  }
}
</style>
